$left-arrow-bg: var(--color-slate-600);

.Tooltip {
  position: relative;
}

.Tooltip-popup {
  font-size: var(--font-sm);
  font-weight: normal;
  line-height: 1.6rem;
  position: absolute;
  border-radius: 4px;
  padding: 1.05rem;
  letter-spacing: 0.4px;
  min-width: 28rem;
  text-align: left;
  white-space: normal;
  background: rgb(49, 54, 85);
  background: linear-gradient(270deg, rgba(49, 54, 85, 0.9) 0%, rgba(37, 40, 65, 0.9) 100%);
  box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  z-index: 10000;

  a {
    color: var(--color-gray-300);
    text-decoration: underline;
  }
}

.Tooltip.nowrap .Tooltip-popup {
  min-width: auto;
  white-space: nowrap;
}

.Tooltip-popup :first-child {
  margin-top: 0;
}

.Tooltip-popup :last-child {
  margin-bottom: 0;
}

// TODO: remove all usages of Tooltip-popup outside of Tooltip component
// and remove the following styles
.Tooltip-popup {
  &.top {
    left: 50%;
    transform: translateY(-0.8rem) translateX(-50%);
    bottom: 100%;
  }

  &.top-start {
    left: 0;
    transform: translateY(-0.8rem);
    bottom: 100%;
  }

  &.top-end {
    right: 0;
    transform: translateY(-0.8rem);
    bottom: 100%;
  }

  &.bottom {
    left: 50%;
    transform: translateY(0.8rem) translateX(-50%);
    top: 100%;
  }

  &.bottom-start {
    left: 0;
    transform: translateY(0.8rem);
    top: 100%;
  }

  &.bottom-end {
    right: 0;
    transform: translateY(0.8rem);
    top: 100%;
  }

  &.left,
  &.left-start,
  &.left-end {
    right: calc(100% + 0.5rem);
    transform: translateY(50%);
  }

  &.left {
    bottom: 70%;
  }

  &.left-start {
    bottom: 95%;
  }

  &.left-end {
    bottom: 25%;
  }

  &.right,
  &.right-start,
  &.right-end {
    left: calc(100% + 0.5rem);
    transform: translateY(50%);
  }

  &.right {
    bottom: 70%;
  }

  &.right-start {
    bottom: 95%;
  }

  &.right-end {
    bottom: 25%;
  }
}

.Tooltip-handle {
  z-index: 1;
  cursor: help;
  position: relative;
  display: inline-flex;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-gray-400);
}

.Tooltip-divider {
  height: 1px;
  background-color: var(--color-gray-500);
  margin: 0.5rem 0;
}

.Tooltip-row {
  display: grid;
  margin: 0 0 0.5rem 0;
  grid-template-columns: 1fr auto;
}

.Tooltip-row > span.label {
  margin-right: 0.5rem;
}

.Tooltip-row-values {
  list-style: none;
  margin: 0;
  padding: 0;
}

.Tooltip-row-values li:not(:first-child) {
  padding: 0.25rem 0 0 0;
  text-align: right;
}

.Tooltip-number {
  color: var(--color-white);
}

.Tooltip-flex {
  display: flex;
  flex-direction: column;
}

@media (max-width: 700px) {
  .Tooltip-row {
    display: block;
    margin-bottom: 1rem;
  }
  .Tooltip-row > span.label {
    display: block;
  }
}
